<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css" media="all">
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<!--导入头部-->
<div id="head" th:include="common/header"></div>
<div>
    <!--轮播图-->
    <div class="layui-carousel" id="test1" style="margin-left: auto;margin-right: auto;height: 500px">
        <div carousel-item>
            <div><img alt="" th:src="@{/images/lbpicone.png}"></div>
            <div><img alt="" th:src="@{/images/lbpictwo.png}"></div>
            <div><img alt="" th:src="@{/images/lbpicthree.png}"></div>
            <div><img alt="" th:src="@{/images/lbpicfour.png}"></div>
            <div><img alt="" th:src="@{/images/lbpicfive.png}"></div>
        </div>
    </div>
    <div style="width: 1350px;margin-right: auto;margin-left: auto;margin-top: 40px">
        <i class="layui-icon layui-icon-tree" style="font-size: 60px;color: #00d249"></i><p style="margin-top: 20px;font-size: 30px;float: right;margin-right: 1000px">旅游城市精选(贵州区)</p>
        <div class="fengexian1" style="width: 1350px;height: 1px;background-color: black;margin-left: auto;margin-right:auto "></div>
    </div>



    <div class="container" style="width: 1350px;margin-left: auto;margin-right: auto;margin-top: 10px" onclick="showToLogin()">
        <div class="container-item" style="width: 300px;height: 360px;float: left">
            <a href="#" style="color: black">
                <img alt="" th:src="@{/images/guiyang.png}">
                <h2 style="margin-left: 60px">美丽筑城--贵阳</h2>
            </a>
        </div>
        <div class="container-item" style="width: 300px;height: 400px;float: left;margin-left: 50px;margin-right: 50px">
            <a href="#" style="color: black">
                <img alt="" th:src="@{/images/anshun.png}">
                <h2 style="margin-left: 60px">西部之秀--安顺</h2>
            </a>
        </div>
        <div class="container-item" style="width: 300px;height: 400px;float: right">
            <a href="#" style="color: black">
                <img alt="" th:src="@{/images/liupanshui.png}">
                <h2 style="margin-left: 60px">中国凉都--六盘水</h2>
            </a>
        </div>
        <div class="container-item" style="width: 300px;height: 400px;float: right;margin-right: 50px">
            <a href="#" style="color: black">
                <img alt="" th:src="@{/images/zunyi.png}">
                <h2 style="margin-left: 60px">红色城市--遵义</h2>
            </a>
        </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>


</div>

<div id="foot" th:include="common/footer"></div>
</body>
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script>
    /*copy的轮播图js代码 功能实现，来自官方文档*/
    layui.use('carousel', function() {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '80%' //设置容器宽度
            ,height:'350px'
            , arrow: 'always' //始终显示箭头
            , autoplay: 'ture'
            //,anim: 'updown' //切换动画方式
        });
    });

    layer.ready(function (){
        layer.msg("若想体验系统完整功能，请先进行用户登录！",{icon:4})
    });
    function showToLogin(){
        layer.msg("若想体验系统完整功能，请先进行用户登录！",{icon:4})
    }

</script>
</html>